<template>
  <view class="container">
    <form @reset="formReset" @submit="formSubmit">
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">姓名</view>
          <input class="tui-input self-flex-content" maxlength="50" name="name" placeholder="请输入姓名" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <view class="tui-title">性别</view>
          <radio-group class="radio-group" name="sex">
            <label class="tui-radio">
              <radio color="#5677fc" value="1"/>
              男
            </label>
            <label class="tui-radio">
              <radio color="#5677fc" value="2"/>
              女
            </label>
          </radio-group>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">年龄</view>
          <input class="tui-input self-flex-content" maxlength="50" name="age" placeholder="请输入年龄" placeholder-class="phcolor"
                 type="number"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">手机号</view>
          <input class="tui-input self-flex-content" maxlength="50" name="mobile" placeholder="请输入手机号" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">邮箱</view>
          <input class="tui-input self-flex-content" maxlength="50" name="email" placeholder="请输入邮箱" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">身份证号码</view>
          <input class="tui-input self-flex-content" maxlength="50" name="idcard" placeholder="请输入身份证号码" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">密码</view>
          <input class="tui-input self-flex-content" maxlength="50" name="pwd" placeholder="请输入密码" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">确认密码</view>
          <input class="tui-input self-flex-content" maxlength="50" name="pwd2" placeholder="请输入确认密码" placeholder-class="phcolor"
                 type="text"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">区间</view>
          <input class="tui-input self-flex-content" maxlength="50" name="range" placeholder="请输入3-20之间的数" placeholder-class="phcolor"
                 type="number"/>
        </view>
      </tui-list-cell>
      <tui-list-cell :hover="false" :last="true">
        <view class="tui-line-cell self-flex">
          <view class="tui-title self-flex-title">金额</view>
          <input class="tui-input self-flex-content" maxlength="50" name="amount" placeholder="请输入金额,允许保留两位小数" placeholder-class="phcolor"
                 type="number"/>
        </view>
      </tui-list-cell>

      <!--下拉选择框 dropdownlist-->
      <tui-dropdown-list :show="dropdownShow" :top="94" :height="400">
        <template v-slot:selectionbox>
          <tui-list-cell type="white" shape="circle" @click="dropdownShow = !dropdownShow">下拉选择框
            <view class="tui-animation" :class="[dropdownShow?'tui-animation-show':'']">
              <tui-icon name="turningdown" :size="20" ></tui-icon>
            </view>
            {{dropdownSelect}}
          </tui-list-cell>
        </template>
        <template v-slot:dropdownbox>
          <view class="tui-selected-list">
            <scroll-view scroll-y class="tui-dropdown-scroll">
              <block v-for="(item,index) in dropdownlistData" :key="index">
                <tui-list-cell @click="dropDownList(item)" :last="dropdownlistData.length-1==index">
                  <tui-icon :name="item.icon" :size="item.size" :color="item.color"></tui-icon>
                  <text class="tui-ml-20">{{item.name}}</text>
                </tui-list-cell>
              </block>
            </scroll-view>
          </view>
        </template>
      </tui-dropdown-list>



      <view class="tui-btn-box">
        <button class="btn-primary" formType="submit" hover-class="btn-hover" type="primary">Submit</button>
        <button class="btn-primary btn-gray" formType="reset" hover-class="btn-gray-hover">Reset</button>
      </view>
    </form>

  </view>
</template>

<script>
  const form = require("../../../utils/form/formValidation");
  import tuiListCell from "@/components/list-cell/list-cell"

  // 下拉框
  import tuiDropdownList from "@/components/dropdown-list/dropdown-list"
  import tuiIcon from "@/components/icon/icon"
  import tuiButton from "@/components/button/button"

  export default {
    components: {
      tuiListCell,
      tuiIcon,
      tuiButton,
      tuiDropdownList,
    },
    name: "formValidation",
    data() {
      return {
        dropdownShow: false,
        dropdownlistData: [
          {
            name: "微信支付",
            icon: "wechat",
            color: "#80D640",
            size: 30
          },
          {
            name: "支付宝支付",
            icon: "alipay",
            color: "#00AAEE",
            size: 30
          },
          {
            name: "银行卡支付",
            icon: "bankcard-fill",
            color: "#ff7900",
            size: 28
          },
          {
            name: "微信支付",
            icon: "wechat",
            color: "#80D640",
            size: 30
          },
          {
            name: "支付宝支付",
            icon: "alipay",
            color: "#00AAEE",
            size: 30
          },
          {
            name: "银行卡支付",
            icon: "bankcard-fill",
            color: "#ff7900",
            size: 28
          }
        ],
        dropdownSelect: ''
      }
    },
    methods: {
      formSubmit(e) {
        //表单规则
        let rules = [
          {
            name: "name",
            rule: ["required", "isChinese", "minLength:2", "maxLength:6"], //可使用区间，此处主要测试功能
            msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
          },
          {
            name: "sex",
            rule: ["required"],
            msg: ["请选择性别"]
          },
          {
            name: "age",
            rule: ["required", "isNum", "range:[0,150]"],
            msg: ["请输入年龄", "请输入正确的年龄", "请输入正确的年龄范围：0-150"]
          },
          {
            name: "mobile",
            rule: ["required", "isMobile"],
            msg: ["请输入手机号", "请输入正确的手机号"]
          },
          {
            name: "email",
            rule: ["required", "isEmail"],
            msg: ["请输入邮箱", "请输入正确的邮箱"]
          },
          {
            name: "idcard",
            rule: ["required", "isIdCard"],
            msg: ["请输入身份证号码", "请输入正确的身份证号码"]
          },
          {
            name: "pwd",
            rule: ["required", "isEnAndNo"],
            msg: ["请输入密码", "密码为8~20位数字和字母组合"]
          },
          {
            name: "pwd2",
            rule: ["required", "isSame:pwd"],
            msg: ["请输入确认密码", "两次输入的密码不一致"]
          },
          {
            name: "range",
            rule: ["required", "range:[3,20]"],
            msg: ["请输入区间数字", "请输入3-20之间的数字"]
          },
          {
            name: "amount",
            rule: ["required", "isAmount"],
            msg: ["请输入金额", "请输入正确的金额，允许保留两位小数"]
          }
        ];
        //进行表单检查
        let formData = e.detail.value;
        let checkRes = form.validation(formData, rules);
        if (!checkRes) {
          uni.showToast({
            title: "验证通过!",
            icon: "none"
          });
        } else {
          uni.showToast({
            title: checkRes,
            icon: "none"
          });
        }
      },
      formReset(e) {
        console.log("清空数据")
      },
      dropDownList(item) {
        this.dropdownShow = !this.dropdownShow
        console.log(item)
        this.tui.toast('选择 ' + item.name)
        this.dropdownSelect = item.name
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "formValidation.css";
</style>
